<template>
	<view class="container">
		<view class="total">
			<text class="uni-h5 uni-text-gray">当前用户</text>
			<view class="uni-row" style="justify-content: space-between;">
				<view class="uni-h4">{{userInfo.nickname}}</view>
				<view class="uni-row">
					<button class="uni-h5 switch" @click="switchAccount">切 换</button>
					<button class="uni-h5 logout" @click="logout">退 出</button>
				</view>

			</view>
		</view>
		<view class="total">
			<text class="uni-h5 uni-text-gray">币币帐户总资产折合 (USD)</text>
			<view><text class="uni-h4">{{userInfo==null?0:userInfo.spotBalance}}</text></view>
		</view>
		<view class="total">
			<text class="uni-h5 uni-text-gray">交割帐户资产折合 (USD)</text>
			<view><text class="uni-h4">{{userInfo==null?0:userInfo.futureBalance}}</text></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: null
			}
		},		
		mounted() {
			this.getUserInfo()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			logout() {
				uni.removeStorageSync("XAUTHTOKEN")
			},
			switchAccount() {
				uni.navigateTo({
					url: "./accounts"
				})
			},
			getUserInfo() {
				console.log("get user Info")
				uni.request({
					url: this.api + '/users/info',
					method: 'GET',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					success: res => {
						console.log("get user info resps")
						console.log(res.data.data)
						this.userInfo = res.data.data
					}
				});
			}
		}
	}
</script>
<style scoped>
	.container .total {
		padding: 20upx 20upx 0 20upx;
	}

	.container .header {
		display: flex;
		padding: 0 20upx 20upx 20upx;
	}

	.logout {
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		background-color: #004085;
		color: #FFFFFF;
		margin: 0upx;
	}

	.switch {
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		background-color: #004085;
		color: #FFFFFF;
		margin-right: 30upx;
	}

	.container .header .l .checkbox {
		zoom: 60%;
		vertical-align: middle;
	}

	.container .list .item .title {
		display: flex;
		padding: 20upx 20upx;
	}

	.container .list .item .title .n {
		width: 50%;
		color: #0952c3;
	}

	.container .list .item .title .g {
		width: 50%;
		text-align: right;
	}

	.container .list .item .thead {
		display: flex;
		padding: 0 20upx 10upx 20upx;
	}

	.container .list .item .thead .l {
		width: 35%;
	}

	.container .list .item .thead .c {
		width: 35%;
	}

	.container .list .item .thead .r {
		width: 30%;
		text-align: right;
	}
</style>
